<template>
    <div class="main">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/managemain' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据管理</el-breadcrumb-item>
            <el-breadcrumb-item>课程管理
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <div class="headtitle">
              <el-input placeholder="请输入查询教工号" v-model="input3" class="input-with-select"></el-input>
              <el-button slot="append" icon="el-icon-search" @click="searchbtn"></el-button>
            </div>
            <el-table
              border
              :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
              style="width: 100%">
              <el-table-column
                    label="课程ID"
                    prop="id">
              </el-table-column>
              <el-table-column
                    label="课程名称"
                    prop="name">
              </el-table-column>
              <el-table-column
                    label="课程学时"
                    prop="time">
              </el-table-column>
              <el-table-column
                align="left">
                <template slot="header">
                    <el-tag type="success">上机课程管理功能模块选择区域</el-tag>
                </template>
                <template slot-scope="scope">
                  <el-button size="mini" @click="dialogFormVisible2 = true" type="primary" plain>编辑</el-button>
                  <el-button size="mini" @click="dialogFormVisible = true" type="primary" plain>增加</el-button>
                  <el-button size="mini" type="danger" plain @click="handleDelete(scope.$index, scope.row)">移除</el-button>
                  <el-dialog title="课程增加" :visible.sync="dialogFormVisible">
                    <el-form :model="addform">
                      <el-form-item label="课程名称" :label-width="formLabelWidth">
                        <el-input v-model="addform.name" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="课程学时" :label-width="formLabelWidth">
                        <el-input v-model="addform.time" autocomplete="off"></el-input>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="addSubmitForm">确 定</el-button>
                    </div>
                  </el-dialog>
                  <el-dialog title="课程编辑" :visible.sync="dialogFormVisible2">
                    <el-form :model="changaddform">
                      <el-form-item label="课程ID" :label-width="formLabelWidth">
                        <el-input v-model="changaddform.id" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="课程名称" :label-width="formLabelWidth">
                        <el-input v-model="changaddform.name" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="课程学时" :label-width="formLabelWidth">
                        <el-input v-model="changaddform.time" autocomplete="off"></el-input>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                      <el-button type="primary" @click="changSubmitForm">确 定</el-button>
                    </div>
                  </el-dialog>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              layout="total"
              :total="this.tableData.length">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      isshow: '1',
      addform: {
        name: '',
        time: ''
      },
      changaddform: {
        id: '',
        name: '',
        time: ''
      },
      search: '',
      searchid: '',
      input3: '',
      dialogFormVisible: false,
      dialogFormVisible2: false,
      name: '',
      time: '',
      formLabelWidth: '120px'
    }
  },
  async created () {
    const res = await this.$http.get('/course/selectAll')
    this.tableData = res.data.datas.course
  },
  methods: {
    searchbtn () {
      this.search = this.input3
    },
    async handleDelete (index, row) {
      this.searchid = row.id
      await this.$http.post(
        '/course/deleteById',
        { courseId: this.searchid },
        { 'Content-Type': 'application/json' }
      ).then(res => {
        if (res.data.code === 200) {
          this.$message.success('课程移除成功')
          this.tableData.splice(index, 1)
        } else {
          this.$message.error('课程移除失败~~')
        }
      })
    },
    async addSubmitForm () {
      this.$http.defaults.headers.post['Content-Type'] = 'application/json'
      const res = await this.$http.post('/course/addCourse', JSON.stringify(this.addform))
      if (res.data.code === 200) {
        this.$message.success('课程增加成功')
      }
      this.dialogFormVisible = false
    },
    async changSubmitForm () {
      console.log(this.changaddform)
      this.$http.defaults.headers.post['Content-Type'] = 'application/json'
      const res = await this.$http.post('/course/updateCourse', JSON.stringify(this.changaddform))
      console.log(res)
      if (res.data.code === 200) {
        this.$message.success('课程更改成功')
      }
      this.dialogFormVisible2 = false
    }
  }
}
</script>
<style>
</style>
<style lang="less" scoped>
.headtitle{
  .el-input{
    width: 40%;
    position: relative;
    left: 56%;
  }
  .el-button{
    float: right;
  }
}
</style>
